<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>deepseek</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简单聊天页面</title>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: self-start;
        height: 100vh;
    }
    #chat-container {
        width: 100%;
        max-width: 1200px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
    }
    #chat-box {
        flex-grow: 1;
        padding: 20px;
        overflow-y: auto;
        border-bottom: 1px solid #eee;
    }
    .message {
        margin-bottom: 15px;
        line-height: 1.4;
    }
    .message.user {
        text-align: right;
    }
    .message.bot {
        text-align: left;
    }
    .message span {
        display: inline-block;
        padding: 10px;
        border-radius: 18px;
        max-width: 70%;
    }
    .message.user span {
        background-color: #007bff;
        color: white;
    }
    .message.bot span {
        background-color: #e9ecef;
        color: black;
    }
    #input-container {
        display: flex;
        padding: 10px;
        background-color: #f8f9fa;
        border-top: 1px solid #eee;
    }
    #message-input {
        flex-grow: 1;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 18px;
        margin-right: 10px;
    }
    #send-button {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 18px;
        cursor: pointer;
    }
    #send-button:hover {
        background-color: #0056b3;
    }
</style>
</head>
<body>

<div id="chat-container">
    <div id="chat-box">
        <!-- 聊天消息将会显示在这里 -->
    </div>
    <div id="input-container">
        <input type="text" id="message-input" placeholder="输入消息...">
        <button id="send-button">发送</button>
    </div>
</div>

<script>
const inputElement = document.getElementById('message-input');
inputElement.addEventListener('keydown', (event) => {
    // 检查是否按下了回车键
    if (event.key === 'Enter' || event.keyCode === 13) {
        // 阻止表单的默认提交行为（如果输入框是在表单中）
        // event.preventDefault();
        // 调用你想要执行的函数
        document.getElementById('send-button').click();
    }
});
document.getElementById('send-button').onclick = function() {
    var messageInput = document.getElementById('message-input');
    var message = messageInput.value;
    messageInput.value = ''; // 清空输入框
    if (message) {
        // 显示用户消息
        appendMessage('You', message);
        // 发送消息到服务器
        sendMessageToServer(message);
    }
};

function appendMessage(sender, message) {
    var chatBox = document.getElementById('chat-box');
    var messageElement = document.createElement('div');
    messageElement.textContent = sender + ': ' + message;
    chatBox.appendChild(messageElement);
    chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部
}

function sendMessageToServer(message) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/index/deepseek/message', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 显示服务器响应
            console.log(xhr.responseText);
            let res = JSON.parse(xhr.responseText);
            if (res.code == 200){
                appendMessage('Bot',res.data);
            }else{
                appendMessage('Bot','发生错误' + res.msg);
            }
        }
    };
    xhr.send('message=' + encodeURIComponent(message));
}
</script>

</body>
</html>
</body>
</html>